<template>
    <div id="cesiumContainer" class="cesium-container">

    </div>
  </template>
  
  <script setup>
  import * as Cesium from 'cesium';
  import { onMounted, onUnmounted } from 'vue';
  // Cesium Viewer实例引用
  let viewer = null;
  

  // 组件挂载生命周期钩子
  onMounted(() => {
    // 配置Cesium Ion访问凭证
    Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MTNlOWJkNy01NTU0LTQ3ZWQtYmM3Yi1mNGViODFhOGY3NzQiLCJpZCI6MjgwODczLCJpYXQiOjE3NDEwNzIwNTl9.v7K25kZiBHwarMikqFQEH-NROT27E4JjdsmpUULH4J0";
  
    // 初始化Cesium三维地球实例
    viewer = new Cesium.Viewer('cesiumContainer', {
      // terrainProvider: Cesium.createWorldTerrain(), // 启用全球地形
      timeline: true,      // 显示时间轴控件
      animation: true,     // 显示动画控件
      shouldAnimate: true // 自动开始动画
    });
    

  });
  
  // 组件卸载生命周期钩子
  onUnmounted(() => {
    if (viewer) {
      // 销毁Cesium实例释放资源
      viewer.destroy();
      viewer = null;
    }
  });

  </script>
  
  <style scoped>

  </style>
